<template>
	<view class="container">
		<view class="order-wrapper">
			<u-form ref="uForm" :model="userData" :rules="rules" :errorType="['message']">
				<u-form-item label-position="left" label-width="160" label="头像" prop="avatar">
					<image @click="chooseImage()" class="order-wrapper__avatar" :src="userData.avatar" mode="aspectFill"></image>
				</u-form-item>
				<u-form-item label-position="left" label-width="160" label="姓名" prop="username">
					<u-input type="text" placeholder="请填写" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="userData.username" :disabled="false"></u-input>
				</u-form-item>
				<u-form-item label-position="left" label-width="160" label="性别" prop="gender">
					<!-- <u-input type="text" placeholder="请填写" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="userData.gender" :disabled="true"></u-input> -->
					<u-radio-group v-model="userData.gender" :placeholder-style="{color: '#999999'}" :clearable="false">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
				</u-form-item>
				
				<u-form-item label-position="left" label-width="160" label="手机" prop="mobile">
					<u-input type="number" placeholder="请填写" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="userData.mobile" :disabled="true"></u-input>
				</u-form-item>
				<u-form-item label-position="left" label-width="160" label="出生日期" prop="birth" right-icon="arrow-right" :rightIconStyle="{color: '#888', fontSize: '32rpx'}">
					<view class="u-input__input" :style="{color: userData.birthday ? '#333333' : '#999999'}" @click="birthShow = true">{{ userData.birthday ? userData.birthday : '请选择'  }}</view>
				</u-form-item>
				<!-- <u-form-item label-position="left" label-width="160" label="详细地址" prop="site">
					<u-input type="text" placeholder="请填写" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="userData.site"></u-input>
				</u-form-item> -->
			</u-form>
			<!-- 请选择出生日期 -->
			<u-calendar v-model="birthShow" mode="date" :safe-area-inset-bottom="true" toolTip="请选择出生日期" @change="birthChange"></u-calendar>
		</view>
		
		<view class="order-footer">
			<view class="order-footer__btn">
				<u-button :custom-style="wd_button_primary" shape="circle" :ripple="true" @click="submit">保存信息</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '女',
						disabled: false
					},
					{
						name: '男',
						disabled: false
					}
				],
				userData: {
					avatar:'',
					username:'',
					gender: '',
					mobile:'',
					birthday:'',
				},
				rules: {
					birthday: [
						{
							required: true,
							message: '请选择出生日期',
							trigger: 'change',
						}
					]
				},
				birthShow: false,
				adviserShow: false
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(){
			this.fetchUserinfo();
		},
		methods: {
			chooseImage() {
				let that = this;
			    uni.chooseImage({
			      count: 1,
			      success: res => {
			        let file = res.tempFiles[0];
					// #ifdef APP-PLUS
					that.$core.uploadFileH5({
					  filePath: file.path,
					  success: (ret, response) => {
					   that.userData.avatar = ret.data.url;
					   that.$forceUpdate();
					  }
					});
					//#endif
					//#ifdef MP-WEIXIN
			        that.$core.uploadFile({
			          filePath: file.path,
			          success: (ret, response) => {
						that.userData.avatar = ret.data.url;
						that.$forceUpdate();
			          }
			        });
					//#endif
			      }
			    });
			},
			//获取信息
			fetchUserinfo() {
				
				let that = this;
				that.$core.get({url: 'fitness.user/index',data: {},success: ret => {
						ret.data.gender = ret.data.gender == 1?'女':'男'
						that.userData = ret.data;
					},
					loading: false
				});
			},
			
			// 选中某个单选框时，由radio时触发
				radioChange(e) {
					console.log(e);
				},

			
			// 请选择出生日期
			birthChange(e) {
				this.userData.birthday = e.result
			},
			submit() {
				var that = this;
				let userData = that.userData;
				that.$core.post({url: 'fitness.user/profile',data: {birthday:userData.birthday,avatar:userData.avatar,username:userData.username,gender: userData.gender=='女'?1:2},success: ret => {
						uni.$emit(getApp().globalData.event.userUpdate,{})
						uni.navigateBack({});
						uni.showToast({
							title: '保存成功'
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 8rpx 0;
		background: #F6F6F6;
	}
	.order-wrapper {
		margin: 16rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		/deep/ .u-form-item {
			padding: 20rpx 32rpx;
			font-size: 26rpx;
			color: #333333;
		}
		/deep/ .u-form-item__message {
			text-align: right;
		}
		/deep/ .u-input__input {
			text-align: right;
			font-size: 26rpx;
			color: #333333;
		}
		/deep/ .u-radio-group {
			float: right!important;
		}
		.order-wrapper__avatar {
			float: right;
			display: block;
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}
	}
	.order-footer {
		padding: 70rpx 24rpx;
		
		.order-footer__btn {
			margin-bottom: 20rpx;
		}
	}
</style>